<script setup>
import { nextTick, onMounted } from 'vue'
import {init} from '../assets/js/study_1'

onMounted(async ()=>{
  await nextTick()
  init()
})
</script>

<template>
  <div class="d3_study">
    <h1 class="d_title">1、改变样式</h1>
    <h2>使用d3修改我的样式</h2>

    <h1 class="d_title">2、改变类名</h1>
    <h3>使用d3修改类名</h3>

    <h1 class="d_title">3、批量改变dom元素内容</h1>
    <ul class="d_text_list">
      <li class="d_text_item"></li>
      <li class="d_text_item"></li>
      <li class="d_text_item"></li>
    </ul>

    <h1 class="d_title">4、添加dom元素</h1>
    <div class="d_add_node"></div>

    <h1 class="d_title">5、删除第二行dom元素</h1>
    <ul class="d_remove_list">
      <li class="d_remove_item">第一行dom元素</li>
      <li class="d_remove_item">第二行dom元素</li>
      <li class="d_remove_item">第三行dom元素</li>
    </ul>

    <h1 class="d_title">6、根据data添加真实dom</h1>
    <ul class="d_add_dom"></ul>

    <h1 class="d_title">7、根据data删除多余dom</h1>
    <ul class="d_remove_dom">
      <li>dom</li>
      <li>dom</li>
      <li>dom</li>
      <li>dom</li>
      <li>dom</li>
      <li>dom</li>
      <li>dom</li>
    </ul>
  </div>
</template>

<style>
.d3_study .d_title{
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
}

.d3_study .d_change_h2{
  color: blue;
  font-size: 15px;
}
</style>
